<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>

    <p class="p1">123123</p>

    <div id="app">
        <!-- <p ref="p" class="p1">count:{{count}}</p>
        <p ref="p" class="p2">count:{{count}}</p>
        <p ref="p" class="p3">count:{{count}}</p>
        <p ref="p" class="p4">count:{{count}}</p>
        <p ref="p" class="p5">count:{{count}}</p> -->

        <p v-for="n in 5" :key="n" ref="p" :class="'p'+ n">count:{{count}}</p>

        <p>
            <button @click="addCount">count++</button>
        </p>
    </div>

</body>
<script>
    // Vue中如果获取页面中的元素?
    // 1. 通过原生JS传统方法获取元素 => 可以用,但是可能不准确
    // document.getElementsByClassName("p1") => 通过文档获取页面中对应class名的元素(获取范围-> 整个文档)

    // 2. Vue中提供了准确获取挂载元素中某个元素/组件的方法  =>  ref属性

    // ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

    // 如何使用ref属性?
    // 1. 给需要获取的元素/组件添加ref属性 (ref='xxx' 对应的名字(ref名))
    // 2. Vue实例在进行初始化渲染时,会判断元素中是否存在ref属性,并对应ref名将对应的元素存储到Vue实例的$refs对象中
    // 3. 使用时,只需要this.$refs.xxx(ref名)获取元素 

    // ref注意
    // 1. 如果有多个元素,使用相同的ref名,默认值存储最后一个(前提不使用v-for)
    // 2. 如果在v-for进行列表渲染时,给元素设置相同的ref名,默认会把相同ref名的元素/组件整合到数组中,对应ref名将对应的数组存储到Vue实例的$refs对象中






    var vm = new Vue({
        // el:"#app",
        data: {
            count: 1,
        },
        methods: {
            addCount() {
                this.count++
            }
        },
        watch: {
            count: {
                handler: function (newVal, oldVal) {
                    console.log("count发生了改变", newVal, oldVal);
                    // var p1 = document.getElementsByClassName("p1")[0];
                    // console.log(p1);  // p1 => 元素节点(对象) => 在控制台打印元素时展示的是内存的最终结果(其实数据改变之后, 视图还未更新 p标签中的内容还是更新前的内容)
                    // console.log("HTML",p1.innerHTML);  // p1 => 元素节点(对象)

                    // var p = this.$refs.p;
                    // console.log(this.$refs.p.innerHTML); 
                    
                }
            }
        }
    })

    vm.$mount("#app");

    console.log(vm);
    console.log(vm.$refs);
    console.log("p",vm.$refs.p);

</script>

</html>